<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>命令语法</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.js"></script>
    </head>
    <body>
        <div id="app">
          <!-- 指令(Directive)是带有“v-”前缀的Vue自定义标签属性，其属性值一般是一个JavaScript表达式。
           v-bind用来给标签指定动态属性值，v-on用来给标签绑定事件监听，v-if和v-show用来控制标签是否显示。
           Vue允许将“v-bind：属性名”简化为“​：属性名”​，​“v-on：事件名”简化为“＠事件名”的形式，并且在实际项目开发中，前端工程师基本上会使用简化的语法进行开发。 -->
          <a v-bind:href="url" :target="targetVal">必应一下</a>
          <br>
          <button v-on:click="comfirm">确认</button>
          <button @click="alertDialog">弹窗</button>
          <br>
          <br>
          <p>{{ count }}</p>
          <button @click="updateCount">更新count</button>
        </div>
        <script>
            const { createApp } = Vue
            // 模板中的变量读取数据的来源都是配置指定的data对象。
            const app = createApp({
                /*通过createApp创建应用对象时，需要为其指定一个配置对象，这个配置对象中有两个基本的配置项，分别是data和methods。
                */
                data() {
                    // data配置项。它的值必须是函数，且返回一个包含n个可变属性的对象，我们一般称此对象为data对象。
                    // 此对象中的属性，我们常称为data属性。在模板中可以读取任意data属性进行动态显示。
                    return {
                        url: 'https://cn.bing.com/',
                        targetVal: '_blank',
                        count: 0
                    }
                },

                // methods中配置的方法可以在模板中直接调用
                methods: {
                    // methods配置项。它是一个包含n个方法的对象。在方法中用户可以通过this.xxx来读取或更新data对象中对应的属性。
                    comfirm() {
                        if(window.confirm('确认必应一下吗?')) {
                            window.location.href = this.url
                        }
                    },

                    alertDialog() {
                        alert('弹窗')
                    },

                    updateCount() {
                        this.count += 1
                    }
                }
            })
            
            const vm = app.mount('#app')

            // 通过代理对象vm读取定义在data对象中的count属性
            console.log(vm.count)

            // 2秒后通过代理对象vm直接更新data对象中的count属性值，页面会自动更新
            setTimeout(() => {
                vm.count += 2
            }, 2000)

            // 4秒后通过代理对象vm调用methods中定义的方法来更新count属性值，页面会自动更新
            setTimeout(() => {
                vm.updateCount()
            }, 4000)
        </script>
    </body>
</html>